<template>
  <div class="notice">
    <DetailSection title="预订须知">
      <div class="notice-inner">
        <template v-for="(item, index) in orderRules" :key="index">
          <div class="item">
            <span class="title"> {{ item.title }}</span>
            <span class="introduction">
              {{ item.introduction }}
              <span class="tips" v-if="item.tips"> 查看说明</span>
            </span>
          </div>
        </template>
      </div>
    </DetailSection>
  </div>
</template>

<script setup>
  import DetailSection from '@/components/detail-section/detail-section.vue'
  defineProps({
    orderRules: {
      type: Object,
      default: () => []
    }
  })
</script>

<style lang="less" scoped>
  .notice {
    font-size: 12px;
    .notice-inner {
      .item {
        display: flex;
        margin: 15px 0 10px 0;
        .title {
          color: #666;
          flex: 1;
        }
        .introduction {
          flex: 5;
          margin-left: 10px;
          .tips {
            margin-left: 90px;
          }
        }
      }
    }
  }
</style>
